<template>
	<div>
		<header class="header">
			<a-form class="formList" layout="inline">
				<a-form-item label="分类">
					<a-select v-model:value="queryParams.category_id" placeholder="选择分类">
						<a-select-option value="">全部分类</a-select-option>
						<a-select-option v-for="(item,index) in classfiyData" :key="index" :value="item.id">
							<span style="margin-left:25px" v-if="item.subclass">
								--{{ item.title }}
							</span>
							<span v-else>
								{{ item.title }}
							</span>
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="资源名称">
					<a-input v-model:value="queryParams.ziyuan_title"></a-input>
				</a-form-item>
				<a-form-item>
					<a-button type="danger" @click="serchButton">查询</a-button>

					<a-button type="primary" class="m-l-10" @click="docVisible=true">
						<template #icon>
							<QuestionCircleOutlined />
						</template>使用说明
					</a-button>
				</a-form-item>
			</a-form>
		</header>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>
						<a-checkbox v-model:checked="selectAll" :indeterminate="indeterminate"
							@change="selectAllChange"></a-checkbox>
					</th>
					<th>编号</th>
					<th>资源ID</th>
					<th>资源名称</th>
					<th>类别</th>
					<th>价格(元)</th>
					<th style="width: 145px;">操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in allResourcesData" :key="index">
					<td>
						<a-checkbox v-model:checked="checkedItem[index]" :value="item.id_str" name="type"
							@change="checkedChange" />
					</td>
					<td>{{ item.id }}</td>
					<td>{{ item.id_str }}</td>
					<td>{{ item.title }}</td>
					<td>{{ item.category }}</td>
					<td>
						<span v-if="item.money > 0">{{item.money}}</span>
						<span v-else style="color: #66CC00;">免费</span>
					</td>

					<td class="text-align">
						<a-button type="primary" size="small" class="m-l-10" @click="tongbuBtn('one', item.id_str)">
							<template #icon>
								<CloudDownloadOutlined />
							</template>同步
						</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination :pageSize="pageSize" :current="page" :total="count" @change="clickPage"
				:pageSizeOptions="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange"
				show-quick-jumper />
		</div>

		<div class="m-t-20">
			<a-button type="primary" @click="tongbuBtn('all')">
				<template #icon>
					<CloudDownloadOutlined />
				</template>批量同步
			</a-button>
		</div>
		<a-modal v-model:visible="tongbuVisible" :closable="false" :confirmLoading="confirmLoading" title="同步资源"
			@ok="tongbuSubmit">
			<div>
				<a-form-item label="分类">
					<a-select v-model:value="tongbuData.category_id" placeholder="选择分类">
						<a-select-option value="">选择同步到以下分类</a-select-option>
						<a-select-option v-for="(item,index) in categorys" :key="index" :value="item.id">
							<span style="margin-left:25px" v-if="item.subclass">
								--{{ item.title }}
							</span>
							<span v-else>
								{{ item.title }}
							</span>
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item>
					共同步<span class="font-18 main-color padding-0-5">{{tongbuNum}}</span>条资源
				</a-form-item>
			</div>
		</a-modal>

		<a-modal v-model:visible="docVisible" title="使用说明" :footer="null" width="650px" @ok="onDoc">
			<ziyuan-tongbu-doc />
		</a-modal>
	</div>
</template>

<script>
	import apiResource from '../../api/resource.js'
	import apiService from '../../api/apiService.js'
	import ziyuanTongbuDoc from '../../components/ziyuanTongbuDoc.vue'

	export default {
		components: {
			ziyuanTongbuDoc
		},
		data() {
			return {
				textareas: false,
				categorys: '', // 本地分类
				classfiyData: '', // api分类
				allResourcesData: [], // 所有数据
				ziyuan: {},
				queryParams: {
					ziyuan_title: '',
					category_id: ''
				},

				auditParams: {
					id: '',
					user_id: '',
					status: '',
					fail_reason: ''
				},

				count: 0,
				page: 1,
				pageSize: 20,
				// 分页
				pageSizeOptions: ['20', '30', '50'],

				ids: [],
				id: '',

				checkedItem: [],

				selectAll: false,
				indeterminate: false,

				tongbuVisible: false,
				tongbuData: {
					category_id: ''
				},
				tongbuType: 'one',
				tongbuNum: 0,

				docVisible: false,
				confirmLoading: false
			}
		},
		mounted() {
			this.allResources()
			this.ResourcesData()
			this.getCategorys()
		},
		methods: {
			// 打开文档
			onDoc() {

			},
			// 全选
			selectAllChange(e) {
				this.selectAll = e.target.checked
				this.ids = []
				let checked = false
				if (e.target.checked === true) {
					this.indeterminate = false
					checked = true
					for (var i = 0; i < this.checkedItem.length; i++) {
						this.ids.push(this.allResourcesData[i].id_str)
					}
				}
				for (var i = 0; i < this.checkedItem.length; i++) {
					this.checkedItem[i] = checked
				}
			},
			tongbuBtn(type = 'one', ids = '') {
				if (type == 'one') {
					if (!ids) {
						this.$message.error('参数错误')
						return false
					}
					this.tongbuNum = 1
					this.tongbuVisible = true
					this.tongbuType = type
					this.id = ids
				} else if (type == 'all') {
					this.tongbuNum = this.ids.length
					this.tongbuType = type
					if (this.selectAll || this.indeterminate) {
						this.tongbuVisible = true
					} else {
						this.$message.error('请勾选要同步的资源')
					}
				}
			},
			// 提交同步
			tongbuSubmit() {
				if (this.tongbuNum < 1) {
					this.$message.error('参数错误')
					return false
				}
				if (!this.tongbuData.category_id) {
					this.$message.error('请选择同步分类')
					return false
				}
				if (this.tongbuType == 'one') {
					this.confirmLoading = true
					this.tongbuData.ziyuan_id = this.id
					apiService.tongbuZiyuanOne(this.tongbuData).then(res => {
						if (res.status == 1) {
							this.tongbuVisible = false
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
						this.confirmLoading = false
					})
				} else if (this.tongbuType == 'all') {
					this.confirmLoading = true
					this.tongbuData.ids = this.ids
					apiService.tongbuZiyuan(this.tongbuData).then(res => {
						if (res.status == 1) {
							this.tongbuVisible = false
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
						this.confirmLoading = false
					})
				}
			},

			checkedChange(e) {
				if (e.target.checked === true) {
					this.ids.push(e.target.value)
					this.indeterminate = true
				} else {
					let index = this.ids.indexOf(e.target.value)
					if (index !== -1) {
						this.ids.splice(index, 1);
					}
					this.indeterminate = true
					this.selectAll = false
				}
				if (this.checkedItem.indexOf(true) == -1) { // 全部取消
					this.indeterminate = false
					this.selectAll = false
					this.ids = []
				}
				if (this.checkedItem.indexOf(false) == -1) { // 全选
					this.indeterminate = false
					this.selectAll = true
				}
			},

			// 获取本地分类数据
			getCategorys() {
				apiResource.getZiyuanCategorys(true).then((res) => {
					this.categorys = res.result
				})
			},
			// 获取api分类数据
			ResourcesData() {
				apiService.getApiCategorys().then(res => {
					this.classfiyData = res.result
				})
			},
			allResources() {
				this.serchButton()
			},

			// 分页
			clickPage(e) {
				this.page = e;
				this.allResources();
			},
			onShowSizeChange(current, pageSize) {
				this.pageSize = pageSize;
				this.page = 1;
				this.allResources();
			},
			// 获取查询接口
			serchButton() {
				apiService.getApiZiyuanList(
					this.page,
					this.pageSize,
					this.queryParams.category_id,
					this.queryParams.ziyuan_title
				).then(res => {
					if (res.status == 1) {
						this.allResourcesData = res.result.data
						this.count = res.result.count
						this.checkedItem = []
						for (let key in res.result.data) {
							this.checkedItem.push(false)
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	:deep(.ant-form-item .ant-select,
		.ant-form-item .ant-cascader-picker) {
		/* width: 100%; */
		width: 188px;
	}
</style>